:root {
    --min-paragraph-height: 18px;
    --paragraph-top-margin: 0px;

    --header-background: #3f4245;
    --header-text-color: #eee;

    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-color-light: rgba(0, 0, 0, 0.3);

    --base-strong: #111;
    --base-strong-up: #3b3b3b;
    --base-strong-up-up: #555;
    --base-weak: #fff;

    --faint-weak-down: #dddddd;
    --faint-weak-down-down: #cccccc;
    --faint-weak: #eeeeee;
    --faint-weak-up: #f0f0f0;

    --faint-strong-down: #7f8081;
    --faint-strong: #9a9b9c;
    --faint-strong-up: #c0c0c0;
    --faint-strong-up-up: #d1d1d1;

    --accent-strong-down: #135eb4;
    --accent-strong: #2373ce;
    --accent-faint: #5291da;
    --accent-faint-up: #83addd;

    --accent-weak-down: #c4daf5;
    --accent-weak: #e1ebf7;
    --accent-weak-up: #f0f4fa;

    --complement-strong: #365a07;
    --complement-faint: #bbe288;
    --complement-weak: #fafdec;

    --critic-strong: #d13c31;
    --critic-faint: #e46960;
    --critic-weak-down: #f3dedb;
    --critic-weak: #f5e7e5;
    --critic-weak-up: #f3e8e7;

    --warning-strong: #eeaa45;
    --warning-weak: #eedaba;

    --success-strong: #23a85a;
    --success-weak: #d6f1e1;


    --section-delimiter-color: #b3b5b9;

    --control-border-radius: 3px;
    --middle-border-radius: 5px;
    --modal-border-radius: 10px;

    --page-content-font-size: 20px;
}

.app-container {
    display: flex;
    height: 100%;
    flex-direction: row;
}
.elec-app-container .link {
    text-decoration: none;
    color: rgb(68, 125, 183);
}
.elec-app-container .link:hover {
    text-decoration: none;
    color: rgb(29, 110, 191);
}

.elec-navigator {
    border-right: 2px solid #999;
}
.elec-main-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--faint-weak);
}

.elec-tab-container {
    position: relative;
    height: 30px;
    width: 100%;
    white-space: nowrap;
    background: #bbb;
    user-select: none;
}
.elec-file-container {
    flex: 1;
}

.elec-file-progress-bar {
    position: absolute;
    height: 5px;
    background: red;
    width: 100%;
    z-index: 5;
    background: linear-gradient(90deg, var(--accent-strong-down) 0%, var(--accent-faint-up) 25%, var(--accent-faint-up) 50%, var(--accent-strong-down) 75%) 0% 0% / 60% 100%;
    animation: elec-progress-animation 30s linear infinite;
}
@keyframes elec-progress-animation {
    0% {
        background-position: 0%
    }
    100% {
        background-position: 6000%
    }
}

.link.with-icon .icon {
    width: 22px;
}


.elec-welcome-panel, .elec-no-editor-panel {
    display: flex;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
}
.elec-welcome-container, .elec-no-editor-container {
    max-width: 400px;
}
.elec-welcome-container h1 {
    margin-bottom: 5px;
}
.elec-welcome-container .welcome-caption {
    margin-top: 5px;
    font-size: 22px;
}
.elec-welcome-container .welcome-caption .app-version {
    display: block;
    font-size: 16px;
    margin-top: 5px;
}
.elec-welcome-container h1,
.elec-welcome-container h3,
.elec-welcome-container .welcome-caption {
    color: #1d3d7a;
}
.elec-welcome-container h3 {
    margin-bottom: 5px;
}
.elec-welcome-container .link,
.elec-no-editor-container .link {
    font-size: 15px;
    max-width: 400px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}
.elec-welcome-container .recent-projects {
    position: relative;
    padding-top: 1px;
    padding-bottom: 1px;
    border: 1px solid rgba(255, 255, 255, 0.0);
}
.elec-welcome-container .recent-projects .icon-delete {
    color: var(--critic-strong);
    display: none;
    position: absolute;
    top: 0;
    right: 2px;
    padding: 1px;
    border-radius: 1px;
    cursor: pointer;
}
.elec-welcome-container .recent-projects:hover {
    border: 1px solid var(--faint-weak-down);
}
.elec-welcome-container .recent-projects:hover .icon-delete {
    display: inline-block;
}
.elec-welcome-container .recent-projects:hover .icon-delete {
    opacity: 0.8;
}

.elec-no-editor-container .link {
    margin-top: 10px;
    margin-bottom: 10px;
}


.elec-tab-container .elec-tab-wrapper {
    width: 100%;
    position: absolute;
    height: 30px;
    overflow: hidden;
}
.elec-tab-container .file-tab {
    position: relative;
    display: inline-block;
    border-left: 1px solid #aaa;
    background: #cfcfcf;
    cursor: pointer;
    max-width: 180px;
    min-width: 110px;
    height: 100%;
    overflow: hidden;
}
.elec-tab-container .file-tab .icon-file-modified {
    position: absolute;
    opacity: 0.3;
    left: 5px;
    top: 8px;
    font-size: 10px;
}
.elec-tab-container .file-tab:first-child {
    border-left: none;
}
.elec-tab-container .file-tab:last-child {
    border-right: 1px solid #bbb;
}
.elec-tab-container .file-tab > span.title{
    display: inline-block;
    padding: 5px 30px 5px 20px;
    width: 100%;
    height: 100%;
    font-size: 13px;
}
.elec-tab-container .file-tab.selected {
    background: #eeeeee;
}
.elec-tab-container .file-tab .close {
    position: absolute;
    display: none;
    top: 5px;
    right: 2px;
    width: 18px;
    height: 18px;
    padding-top: 2px;
    text-align: center;
    border-radius: 4px;
    background: none;
    font-size: 12px;
}
.elec-tab-container .file-tab:hover .close {
    display: block;
}
.elec-tab-container .file-tab .close:hover {
    background: #aaa;
}
.elec-tab-container .scroller {
    display: none;
    position: absolute;
    width: 80px;
    height: 5px;
    cursor: grab;
    background: #777;
    bottom: 0;
    left: 10px;
}
.elec-tab-container:hover .scroller {
    display: block;
}
.elec-tab-container:hover .scroller.disabled {
    display: none;
}

.elec-navigator {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: #f0f0f0;
    user-select: none;
}
.elec-navigator-expander {
    position: fixed;
    top: 0;
    height: 100%;
    width: 1px;
    background: #999;
    cursor: ew-resize;
    border: none;
    user-select: none;
    z-index: 100;
}
.elec-navigator-expander:hover {
    border-left: 1px solid #999;
    border-right: 1px solid #999;
}
.elec-navigator .navigator-header {
    height: 30px;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    padding: 7px 13px;
    background: #ccc;
    border-bottom: #999 solid 1px;
}
.elec-navigator.collapsed .navigator-header {
    padding: 2px;
}
.elec-navigator.collapsed .navigator-header .toggle-button {
    padding: 4px;
}
.elec-navigator .navigator-body {
    height: 100%;
    flex: 1;
    overflow: auto;
}
.elec-navigator .navigator-spacing {
    display: inline-block;
}
.elec-navigator .navigator-entry {
    position: relative;
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    padding: 3px 5px;
    font-size: 13px;
    cursor: pointer;
}
.elec-navigator .navigator-entry .entry-name {
    padding: 1px;
}
.elec-navigator .navigator-entry .icon {
    display: inline-block;
    padding-right: 5px;
}
.elec-navigator .navigator-entry input.renaming-textfield {
    flex: 1;
    border: none;
    outline: none;
    padding: 1px;
    margin: 0;
}
.elec-navigator .navigator-entry.focused {
    background: #dedede;
}
.elec-navigator .navigator-entry:hover {
    background: #ddd;
}
.elec-navigator .navigator-entry-drag-preview {
    background: #ddd;
    padding: 1px;
    border-radius: 2px;
    font-size: 13px;
}
.elec-navigator .navigator-entry-preview {
    position: fixed;
    padding: 5px;
    display: flex;
    flex-direction: column;
    background: #f0f0f0;
    border: 1px solid #ccc;
    z-index: 100;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
.elec-navigator .navigator-entry-preview h3 {
    margin-top: 0;
    margin-bottom: 5px;
}
.elec-navigator .navigator-entry-preview img {
    flex: 1;
    max-width: 250px;
    max-height: 250px;
}

.elec-file-container > div {
    height: 100%;
    width: 100%;
}